<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日贺卡</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/card.css">
    <link rel="stylesheet" href="styles/fonts.css">
<body>
    <!-- 导航栏 -->
    <nav class="nav-bar">
        <a href="index.html" class="nav-item">首页</a>
        <a href="memories.html" class="nav-item">回忆</a>
        <a href="wishes.html" class="nav-item">祝福</a>
    </nav>

    <!-- 动态背景 -->
    <div class="bg-wrapper">
        <div class="bg-layer stars"></div>
        <div class="bg-layer clouds"></div>
        <div class="bg-layer moon"></div>
        <div class="bg-layer shooting-stars"></div>
    </div>

    <div class="container">
        <div class="card-scene">
            <!-- 3D卡片容器 -->
            <div class="birthday-card">
                <!-- 卡片正面 -->
                <div class="card-front">
                    <div class="card-content">
                        <h1 class="title">生日快乐</h1>
                        <div class="cake-wrapper">
                            <div class="cake">
                                <!-- 蛋糕主体 -->
                                <div class="cake-body">
                                    <div class="layer top">
                                        <div class="icing"></div>
                                        <div class="drip"></div>
                                    </div>
                                    <div class="layer middle">
                                        <div class="filling"></div>
                                    </div>
                                    <div class="layer bottom">
                                        <div class="icing"></div>
                                    </div>
                                </div>
                                
                                <!-- 装饰品 -->
                                <div class="decorations">
                                    <div class="strawberries">
                                        <span>🍓</span>
                                        <span>🍓</span>
                                        <span>🍓</span>
                                    </div>
                                    <div class="blueberries">
                                        <span>🫐</span>
                                        <span>🫐</span>
                                    </div>
                                    <div class="candles">
                                        <div class="candle" style="opacity: 0; transform: translateY(-50px)">
                                            <div class="stick"></div>
                                            <div class="flame-wrap">
                                                <div class="flame"></div>
                                                <div class="glow"></div>
                                            </div>
                                        </div>
                                        <div class="candle" style="opacity: 0; transform: translateY(-50px)">
                                            <div class="stick"></div>
                                            <div class="flame-wrap">
                                                <div class="flame"></div>
                                                <div class="glow"></div>
                                            </div>
                                        </div>
                                        <div class="candle" style="opacity: 0; transform: translateY(-50px)">
                                            <div class="stick"></div>
                                            <div class="flame-wrap">
                                                <div class="flame"></div>
                                                <div class="glow"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 盘子 -->
                                <div class="plate"></div>
                            </div>
                        </div>
                        <p class="message">愿你的生日充满欢乐和惊喜！</p>
                        <div class="controls">
                            <button class="control-btn music-btn">
                                <span class="btn-icon">🎵</span>
                                <span class="btn-text">播放音乐</span>
                            </button>
                            <button class="control-btn flip-btn">
                                <span class="btn-icon">💌</span>
                                <span class="btn-text">查看祝福</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 卡片背面 -->
                <div class="card-back">
                    <div class="card-content">
                        <h2>亲爱的朋友</h2>
                        <div class="wishes">
                            <p>愿你永远保持年轻的心态</p>
                            <p>愿你的笑容如阳光般温暖</p>
                            <p>愿你的生活充满无限可能</p>
                        </div>
                        <div class="signature">
                            <p>你的朋友</p>
                            <p class="sign-name">小明</p>
                        </div>
                        <button class="control-btn flip-btn">
                            <span class="btn-icon">🎂</span>
                            <span class="btn-text">返回正面</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="scripts/message.js"></script>
    <script src="scripts/auth.js"></script>
    <script src="scripts/main.js"></script>
    <script src="scripts/card.js"></script>
</body>
</html> 